<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Chem Obj Setter Test</title>

  <!--
  <link rel="stylesheet" type="text/css" href="../../../src/widgets/themes/default/default.css" />
  <link rel="stylesheet" type="text/css" href="../../../src/widgets/themes/default/defaultColor.css" />
  <link rel="stylesheet" type="text/css" href="../../../src/widgets/themes/default/chemWidget.css" />
  <link rel="stylesheet" type="text/css" href="../../../src/widgets/themes/default/chemWidgetColor.css" />
  -->
  <link rel="stylesheet" type="text/css" href="../../../src/widgets/themes/default/kekule.css" />
  <style>
    .Viewer
    {
      border: 1px solid red;
    }
  </style>

  <script src="../../_libs/Three.js"></script>
  <script src="../../_libs/raphael-min.2.0.1.js"></script>

  <script src="../../../src/kekule.js?min=false&modules=chemWidget,calculation,openbabel"></script>
  <!--
  <script src="../../../src/_compressed/kekule.min.js"></script>
  -->
  <script id="product1" type="chemical/x-kekule-json">
    {"id":"m1","renderOptions":{"expanded":true,"__type__":"object"},"coord2D":{"x":12.912444254557293,"y":37.61377766927083,"__type__":"object"},"charge":0,"ctab":{"nodes":[{"__type__":"Kekule.Atom","id":"a3","coord2D":{"x":0.6928203230275525,"y":0.3999999999999986,"__type__":"object"},"charge":0,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a18","coord2D":{"x":1.3856406460551032,"y":0.7999999999999972,"__type__":"object"},"charge":0,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a15","coord2D":{"x":0,"y":0.7999999999999972,"__type__":"object"},"charge":0,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a2","coord2D":{"x":0.6928203230275525,"y":-0.3999999999999986,"__type__":"object"},"charge":0,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a19","coord2D":{"x":2.078460969082652,"y":0.3999999999999986,"__type__":"object"},"charge":0,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a21","coord2D":{"x":1.3856406460551032,"y":1.5999999999999943,"__type__":"object"},"charge":0,"isotopeId":"O"},{"__type__":"Kekule.Atom","id":"a16","coord2D":{"x":-0.6928203230275507,"y":0.3999999999999986,"__type__":"object"},"charge":0,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a1","coord2D":{"x":0,"y":-0.7999999999999972,"__type__":"object"},"charge":0,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a20","coord2D":{"x":2.771281292110203,"y":0.7999999999999972,"__type__":"object"},"charge":0,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a17","coord2D":{"x":-0.6928203230275507,"y":-0.3999999999999986,"__type__":"object"},"charge":0,"isotopeId":"C"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Bond","id":"b17","bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedNodes":[0,1]},{"__type__":"Kekule.Bond","id":"b3","bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedNodes":[0,2]},{"__type__":"Kekule.Bond","id":"b2","bondType":"covalent","bondOrder":2,"electronCount":4,"isInAromaticRing":false,"connectedNodes":[0,3]},{"__type__":"Kekule.Bond","id":"b18","bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedNodes":[1,4]},{"__type__":"Kekule.Bond","id":"b20","bondType":"covalent","bondOrder":2,"electronCount":4,"isInAromaticRing":false,"connectedNodes":[1,5]},{"__type__":"Kekule.Bond","id":"b14","bondType":"covalent","bondOrder":2,"electronCount":4,"isInAromaticRing":false,"connectedNodes":[2,6]},{"__type__":"Kekule.Bond","id":"b1","bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedNodes":[3,7]},{"__type__":"Kekule.Bond","id":"b19","bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedNodes":[4,8]},{"__type__":"Kekule.Bond","id":"b15","bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedNodes":[6,9]},{"__type__":"Kekule.Bond","id":"b16","bondType":"covalent","bondOrder":2,"electronCount":4,"isInAromaticRing":false,"connectedNodes":[7,9]}],"__type__":"Kekule.StructureConnectionTable"},"__type__":"Kekule.Molecule"}
	</script>
  <script>
    var objSetter;
    Kekule.X.domReady(function(){
      objSetter = Kekule.Widget.getWidgetById('chemObjSetter');
      Kekule.Widget.getWidgetById('objInspector').setObjects(objSetter);
      Kekule.Widget.getWidgetById('btnAdd').addEventListener('execute', function(){
        var imgElem = objSetter.createExportImgElement(document/*, 'image/svg+xml'*/);
        imgElem.className += ' Viewer';
        //imgElem.setAttribute('data-predefined-setting', 'mini');
        document.getElementById('stage').appendChild(imgElem);
      });
      /*
      Kekule.Widget.AutoLauncher.enabled = false;
      Kekule.Widget.AutoLauncher.enableDynamicDomCheck = false;
      */
    });
  </script>
</head>
<body>
  <div id="objInspector" data-widget="Kekule.Widget.ObjectInspector" style="float:right"></div>
  <div id="chemObjSetter" style="width:600px;height:400px"
       data-widget="Kekule.ChemWidget.ChemObjInserter" data-resizable="true" data-chem-obj="url('#product1')"></div>
  <div>
    <br />
    <br />
    <button id="btnAdd" data-widget="Kekule.Widget.Button">Add Image</button>
  </div>
  <div id="stage"></div>

</body>
</html>